<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-21 13:41:19
 * @LastEditors: dh
 * @LastEditTime: 2022-12-02 11:16:55
-->
<template>
	<div>
		<span class="slot-msg">{{ msg }}</span>
		<button class="slot-color" @click="triggerEmit">测试emit</button>
		<slot />
		<slot name="A" />
	</div>
</template>

<script setup lang="ts">
import { useSlots, useAttrs, ref } from 'vue';
// 全局编译器宏只能在 script-setup 模式下使用； 使用宏时无需 import可以直接使用；
// script-setup 提供了 4 个宏， defineProps 、 defineEmits 、 defineExpose  、 withDefaults 。

const name = ref('pingan8787');

// TODO 获取props
// 方式一： const props = defineProps(['msg']);
// 方式二： const props = defineProps({ msg: String });
// 方式三:  const props = defineProps({ msg: { type: String, default: '0' } });
// 方式四：setup + ts 专有写法   const props = defineProps<{ msg: string }>();
// 方式五：setup + ts 专有写法
withDefaults(defineProps<{ msg: string; age?: number }>(), {
	msg: '默认msg',
});

// 显式暴露的数据，父组件才可以获取
defineExpose({ name });

// * 获取emit 方式一
// const emit = defineEmits(['change']);
// * 获取emit 方式二  val1 表示第一个参数，多个参数往后增加即可
const emit = defineEmits<{
	(e: 'change', val1: string): void;
}>();

const triggerEmit = () => {
	emit('change', 'change触发了');
};

const slots = useSlots();
console.log({ slots });

const attrs = useAttrs();
console.log({ attrs });
</script>
